<template>
  <div class="app-container">
    <h2>拼单列表</h2>

    <el-table :data="orderList" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="拼单发起者" width="100">
        <template slot-scope="{row}">
          <span>{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="拼单商店" width="100">
        <template slot-scope="{row}">
          <span>{{ row.store.storeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="拼单物品名称" width="150">
        <template slot-scope="{row}">
          <span>{{ row.good.goodName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="拼单物品类型" width="100">
        <template slot-scope="{row}">
          <span>{{ row.good.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="拼单物品总数" width="80">
        <template slot-scope="{row}">
          <span>{{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单人数" width="80">
        <template slot-scope="{row}">
          <span>{{ row.nowNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单价格（单价）" width="80">
        <template slot-scope="{row}">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单进度" width="80">
        <template slot-scope="{row}">
          <span>{{ row.nowGoodNumber }} / {{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="截至日期" width="250">
        <template slot-scope="{row}">
          <el-date-picker ref="date" type="datetime" v-model="row.end_time" readonly />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单状态" width="80">
        <template slot-scope="{row}">
          <span>{{ row.fightOrderState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="seePindan(row)">
            查看拼单详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看拼单详情界面-->
    <el-dialog title="拼单详情" :visible.sync="seePindanVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="拼单发起者" prop="id">
          <el-input v-model="temp.userName" readonly />
        </el-form-item>
        <el-form-item label="拼单门店" prop="store">
          <el-input v-model="temp.storeName"  readonly />
        </el-form-item>
        <el-form-item label="拼单商品" prop="good">
          <el-input v-model="temp.goodName" readonly />
        </el-form-item>
        <el-form-item label="拼单商品进度" prop="schedule">
          <el-input v-model="temp.schedule" readonly />
        </el-form-item>
        <el-form-item label="拼单价格（单价）" prop="price">
          <el-input v-model="temp.price" readonly />
        </el-form-item>
        <el-form-item label="拼单数量" prop="number">
          <el-input v-model="temp.number" type="number" :placeholder="'剩余拼单商品数量：' + temp.leftNumber"/>
        </el-form-item>
        <el-form-item label="截止日期" prop="type">
          <el-date-picker ref="date" type="datetime" v-model="temp.endTime" readonly />
        </el-form-item>
        <el-form-item label="拼单状态" prop="type">
          <el-input v-model="temp.status" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seePindanVisible = false">
          返回
        </el-button>
        <el-button @click="paticipy">
          参与拼单
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import request from '@/utils/request'
  export default {
    name: 'list-pindan',
    data () {
      return {
        userId: 0,
        userName: '',
        orderList: [],
        seePindanVisible: false,
        temp: {
          id: null,
          userName: null,
          storeName: null,
          goodName: null,
          schedule: null,
          leftNumber: null,
          price: null,
          number: null,
          endTime: null,
          status: null
        }
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.userId = JSON.parse(sessionStorage.getItem('user')).userId
        this.userName = JSON.parse(sessionStorage.getItem('user')).userName
        // 初始化数据，用户可以看到的朋友发起的清单列表，后面需要写上用户的id
        request.get("/fightorder/getUserSeeOrder/"+this.userId ).then(request => {
          var Data=request.data // PFResponse
          this.orderList = Data.data
        })
      },
      seePindan(row) {
        this.temp.id = row.id
        this.temp.userName = row.userName
        this.temp.storeName = row.store.storeName
        this.temp.goodName = row.good.goodName
        this.temp.schedule = row.nowGoodNumber + "/" + row.goodNumber
        this.temp.leftNumber = row.goodNumber - row.nowGoodNumber
        this.temp.price = row.price
        this.temp.endTime = row.end_time
        this.temp.status = row.fightOrderState

        this.seePindanVisible = true
      },
      paticipy() {
        if (this.temp.number==null) {
          this.$message.warning("请输入拼单数量！")
          return
        } else if(this.temp.number>this.temp.leftNumber) {
          this.$message.warning("拼单数量超出上限，请重新输入")
          return
        }
        // 参与拼单,id为用户id，怎么存储还得继续看
        request.get("/fightorder/join/"+ this.temp.id+"/"+ this.userName + "/" + this.temp.number ).then(request => {
          var Data=request.data // PFResponse
          if (Data.code == 200){
            // 拼单成功，可以在我参与的拼单里面进行查看
            this.$message.success(Data.message)
            this.seePindanVisible = false
            this.init()
          } else {
            this.$message.warning(Data.message)
            this.init()
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
